<template>
    <div :class="`tech-after-sale-detail ${mode}`">
        <!-- 状态 -->
        <DetailStatusInfo :statusInfo="statusInfo" @cancel="cancelApply" />
        <!-- 退款金额 -->
        <DetailRefundInfo :price="detailInfo.trans / 100" />
        <!-- 退货地址&快递信息 -->
        <DetailExpressInfo
            v-if="statusInfo.isHaveExpress"
            :info="detailInfo"
            :isShow="statusInfo.isShowExpress"
            @express="addExpressInfo"
        />
        <!-- 退货商品 -->
        <DetailGoodsList :list="detailInfo.details" :reason="detailInfo.reason" />
        <!-- 订单信息 -->
        <DetailBaseInfo :info="detailInfo" />
        <Footer :noBackground="true" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import DetailStatusInfo from './aftersale/DetailStatusInfo';
import DetailRefundInfo from './aftersale/DetailRefundInfo';
import DetailExpressInfo from './aftersale/DetailExpressInfo';
import DetailGoodsList from './aftersale/DetailGoodsList';
import DetailBaseInfo from './aftersale/DetailBaseInfo';
import { Footer } from '@components/biz';
import { getShopAfterSaleOrderTipInfo } from '@biztools/shopOrder';
import { setTitle } from '@common/utils';
import { getUiMode, getUiTheme, getUiStyleMode } from '@biztools/info';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
import { ClearTip, TipLoading } from '@common/tip';

export default {
    name: 'AfterSaleDetail', // 售后详情
    components: {
        DetailStatusInfo,
        DetailRefundInfo,
        DetailExpressInfo,
        DetailGoodsList,
        DetailBaseInfo,
        Footer,
    },
    computed: {
        ...mapState({
            detailInfo: state => state.orderDetail.afterSaleOrderDetail,
        }),
        statusInfo() {
            return getShopAfterSaleOrderTipInfo(this.detailInfo);
        },
    },
    data() {
        return {
            // 获取设置的配置信息
            mode: getUiMode() || DEFAULT_MODE,
            theme: getUiTheme() || DEFAULT_THEME,
            styleMode: getUiStyleMode() || DEFAULT_STYLE_MODE,
        };
    },
    async created() {
        setTitle('售后详情');
    },
    async mounted() {
        const { applyNumber } = this.$route.params;
        setTimeout(async () => {
            TipLoading('获取详情中...');
            await this.getAfterSaleOrderDetail(applyNumber);
            ClearTip();
        }, 10);
    },
    methods: {
        ...mapActions([
            'getAfterSaleOrderDetail',
            'addAfterSaleOrderExpressInfo',
            'cancelAfterSaleOrder',
        ]),
        // 取消申请
        async cancelApply() {
            const { applyNumber } = this.$route.params;
            await this.cancelAfterSaleOrder(applyNumber);
            await this.getAfterSaleOrderDetail(applyNumber);
        },
        // 添加快递信息
        async addExpressInfo({ name, number, id }) {
            const { applyNumber } = this.$route.params;
            await this.addAfterSaleOrderExpressInfo({
                apply_number: applyNumber,
                platform_name: name,
                platform_no: number,
                platform_id: id,
            });
            await this.getAfterSaleOrderDetail(applyNumber);
        },
    },
};
</script>

<style lang="less">
.tech-after-sale-detail {
    .mode-white();
    .p-v(@shop-bag-gap);
    min-height: calc(100vh - 2 * @shop-bag-gap);
    &.white {
        background-color: @shop-bg-color;
    }
    &.black {
        background-color: #000000;
    }
}
</style>
